<template>
  <div class="a">
    <div class="header"></div>
    <div class="iconfont iconicon-test frist"></div>
    <div class="logo iconfont iconnew"></div>  
    <myinput
    name='username'
      type='username'
      placeholder="用户名/手机号"
      err_message='请输入11位的手机号'
      @input="handlerinput"
      :rules="/^1[35789]\d{9}$/"
    ></myinput>
    <myinput
     name='password'
      placeholder="密码"
      err_message='请输入8-16位的其中包含英文字母的密码'
      type="password"
      @input="handlerinput"
      :rules="/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/"
    ></myinput>
    <mybutton type="success" @click="login">登录</mybutton>
  </div>
</template>

<script>
import "../styles/iconfont.css";
import myinput from "../components/myframe/myinput";
import mybutton from "../components/myframe/mybutton";
import {userLogin} from '@/api/index.js'
import {setToken,setUserInfo} from '../untails/mytoken'
export default {
  components: {
    myinput,
    mybutton,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
      handlerinput(data) {
      // console.log(this.text, this.password);
      // console.log(data);
      const key=Object.keys(data)[0]
      console.log(key);
      
      const value=Object.values(data)[0]
      this[key]=value
      // console.log(this.username,this.password);
      
    },
    login() {
      // console.log(11);
      
      // console.log(this.text, this.password);
      if(!this.username || !this.password){
        console.log(this.username,this.password);
         return this.$toast.fail('用户名或密码不能为空')
      }
      const data={username:this.username,password:this.password}
      userLogin(data).then((res)=>{
        console.log(res);
        if(res.data.message==='登录成功'){
          console.log('需要token保存到本地'); 
          setToken(res.data.data.token)
          setUserInfo(res.data.data.user)
          this.$toast.success('登录成功')
          if(this.$route.params.target){
            this.$router.replace(this.$route.params.target)
          }else{
            this.$router.replace("/userinfo");
          }
        }else{
          this.$toast.fail(res.data.message)
        }
      })
    },
  
  },
};
</script>

<style lang="less" scoped>
.a{
  box-sizing: border-box;
}
.logo{
  text-align: center;
  color: #d81e06;
  font-size: 160px;
}
.header {
  width: 100vw;
  height: 30/540 * 100vw;
  background-color: #757575;
}
.frist {
  margin-top: 26px;
  margin-left: 17px;
  font-size: 30px;
}
</style>